<!-- 案场列表右侧 -->
<template>
  <div class='crimeSceneList_right_content'>
    <dt-search ref="search" :xl="8"></dt-search>
    <dt-grid ref="table" :page="page" :onFetch='onFetch' :select='{change:onSelectChange}' />
    <div class="syBtn">
      <Checkbox style="margin-top:8px;" v-model="adjustmentFlag"
        @on-change="adjustmentStatusChange"> 显示无业务处案场
      </Checkbox>
      <Button type="primary" :disabled='!selectionList.length' style="margin-left:10px;"
        @click="adjustmentCase">调整至其他组织</Button>
    </div>

    <Modal v-model="adFlag" title="编辑权限" width='800' @on-cancel="adCancel">
      <div class="tree">
        <Tree :data="treeListBusiness1" @on-select-change="treeChangeBusiness1"
          class="tree_render">
        </Tree>
      </div>
      <div slot="footer">
        <Button type="text" @click="adCancel">取消</Button>
        <Button type="primary" @click="adSave">确定</Button>
      </div>
    </Modal>

    <Modal v-model="bdFlag" title="移动至新组织" width='800' @on-cancel="bdCancel">
      <div>是否将以下{{selectionList.length}}个案场移动至：{{chooseTree.orgName}}?</div>
      <div class="tree" style="margin-top:10px;">
        <Tag type="border" closable v-for="(item,index) in selectionList" :key="index"
          color="primary" style="margin:5px;" @on-close="handleClose(index)">
          {{item.housesName}}</Tag>
      </div>
      <div slot="footer">
        <Button type="text" @click="bdCancel">取消</Button>
        <Button type="primary" @click="bdSave">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import caseMgr from '@/biz/crimeSceneList'
  import columnOpt from './opt/adjustmentColumn'
  import SearchOpt  from './opt/adjustSearch'
  export default {
    props: {
      treeList: {
        type: Array,
        default: () => [],
      },
    },
    data() {
      return {
        // 案场modal
        bdFlag: false,
        treeListBusiness1: [],
        adFlag: false,
        selectionList: [],
        searchInfo: {
          housesName: '',
          chairMan: '',
          cityId: [],
          housesStatus: '',
        },
        adjustmentFlag: true,
        page: {
          total: 0,
          current: 1
        },
        orgId: '',
        level: '',
        departmentIdList: [],
        chooseTree: {},
        bids: []
      }
    },
    computed: {},
    watch: {},
    methods: {
      bdCancel() {
        this.bdFlag = false;
        this.bids = []
      },
      bdSave() {
        this.page = {
          total: 0,
          current: 1
        }
        let params = {
          level: this.chooseTree.level,
          orgId: this.chooseTree.orgId,
          bids: this.bids,

        }
        caseMgr.updBuildingOrgBath(params).then(res => {
          this.bdCancel()
          this.$refs.table.fetch()
        })
      },
      renderContent() {
        return (h, {
          data
        }) => {
          return h('span', {
            style: {
              display: 'inline-block',
              backgroundColor: data.disabled ? '#f7f7f7' : '',
              color: data.disabled ? '#c5c8ce' : '',
              // padding: '0 4px',
              lineHeight: '1.5'
            },
          }, data.title)
        }
      },
      //获取业务组织架构
      forEachOA(mess) {
        mess.forEach((item) => {
          item.title = item.orgName
          item.expand = true
          item.render = this.renderContent()
          item.disabled = item.level == 3 && !this.departmentIdList.includes(String(item
              .orgId)) ?
            false : true
          item.children && this.forEachOA(item.children)
        })
      },
      getBusinessList() {
        caseMgr.getOrganizationList1().then(res => {
          console.log(res, '我是业务组织架构');
          if (res) {
            this.forEachOA(res)
            this.treeListBusiness1 = res
          }
        })
      },
      adjustmentCase() {
        this.adFlag = true
        this.getBusinessList()
      },
      adjustmentStatusChange(val) {
        this.page = {
          total: 0,
          current: 1
        }
        this.$refs.table.fetch()
      },
      treeChangeBusiness1(event) {
        console.log(event, '点击了树结构')
        this.chooseTree = event[0]
      },
      adCancel() {
        this.adFlag = false
        this.chooseTree = {}
      },
      adSave() {
        if (this.chooseTree && this.chooseTree.orgId) {
          this.bdFlag = true
          this.adFlag = false
        } else {
          this.$Message.warning('请选择一个组织。')
        }

      },
      handleClose(index) {
        this.bids = []
        this.selectionList.splice(index, 1)
        this.selectionList.forEach(item => {
          this.bids.push(item.housesId)
        })
      },
      onSelectChange(e) {
        this.departmentIdList = []
        this.bids = []
        this.selectionList = e
        this.selectionList.forEach(item => {
          this.departmentIdList.push(item.departmentId)
          this.bids.push(item.housesId)
        })
      },

      // 获取案场数据
      getParams(orgId, level) {
        this.orgId = orgId;
        this.level = level
        this.page = {
          current: 1,
          total: 0
        }
        this.$refs.table.fetch()
      },
      onFetch(data) {
        let params = {
          ...data,
          orgId: this.orgId, //案场所属 组织id
          level: this.level,
          cityCode: this.searchInfo.cityId.length ? this.searchInfo.cityId[1] :
          '', //所属城市
          noOrg: this.adjustmentFlag ? 1 : 2, //是否显示无业务处案场
        }
        return caseMgr.adjustHousesList(params).then(res => {
          return res
        })
      },
    },
    created() {
      this.adjustmentFlag = this.$route.query.noOrg ? true : false
    },
    activated() {},
    mounted() {
      this.$refs.table.init(this,new columnOpt(this))
      this.$refs.search.init(this.$refs.table, new SearchOpt(this), this
        .searchInfo)
    },
  }
</script>
<style lang='scss' scoped>
  .crimeSceneList_right_content {
    position: relative;
    width: 100%;

    ::v-deep .ivu-tabs-bar {
      padding-left: 20px;
    }

    .syBtn {
      position: absolute;
      right: 20px;
      top: 80px;
      display: flex;
      flex-direction: row;
    }
  }

  .house_search {
    ::v-deep .ivu-select-dropdown-list {
      max-height: 300px;
      overflow-y: auto;
    }
  }

  .tree_render {
    height: 500px;
    overflow: auto;
  }
</style>